// 回顾类组件中使用redux
// 01:  创建 store
// import {createStore} from 'redux'
// 02: 定义初始state 数据
// const defaultState = {count:10,num:0}
// 03: 定义reducer 函数  
// const reducer =(state=defaultState,actions)=>{ 根据action任务去修改state 注意: 要保留原数据}
// 04: 创建store   
// const store = createStore(reducer[,添加一行配置,为了方便在浏览器中调试redux])
// 05: 导出store 
// 06: 需要使用 一个redux 操作的辅助插件 react-redux
// import {Provider} from 'react-redux'
// <Provider store={store}></Provider>

// 07:   在页面中使用redux 数据

// 第一种: 在类组件中操作
// 首先需要引入connect 高阶组件强化函数
// import {connect} from 'react-redux'

// 定义映射辅助函数 
// function mapStateToProps(state){return state}
// function mapDispatchToProps(dispatch){return {addCount(){dispath(acions)}}}
// export default  connect(mapStateToProps,mapDispatchToProps)(组件名)
 
 
// 第二种: 在函数组件中操作
// 使用 hooks 函数 操作redux 中的数据
// import {useSelector,useDispatch} from 'react-redux'
// 获取store中的state 数据
// const state = useSelector((state)=>{return state})
// 获取dispach 方法
// const dispatch = useDispatch()
// 派发任务
// dispatch(actions)






import React,{useState} from 'react';
// .引入函数组件中操作 redux 数据的两个hook 函数
import {useSelector,useDispatch} from 'react-redux';

const Home = () => {
    //01: 使用useSelector 获取store 中的state数据
    const state = useSelector((state)=> state);
    console.log(state);
    //02: 使用 useDispatch 获取 dispath 对象,来操作store中的数据
    const dispatch = useDispatch()

    const [num1,setNum]= useState(state.shop.num)

    // 定义事件 addNum
    const addNum = ()=>{
        // 修改数据
        // 修改store中的shop模块中的num 数据 使用dispatch 方法,派发actions 任务,然后reducer去处理actions任务,进而修改state
        dispatch({type:'jia',payload:100})
        setNum(state.shop.num)
    }
    return (
        <div>
            <p>store中的shop模块中的num: {num1}</p>  
              {/*修改数据  */}
              <p><button onClick={addNum}>修改num</button></p>
        </div>
    );
}

export default Home;
